<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2024/12/15
  Time: 22:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <style type="text/css">
    ul li {
      list-style: none;
      display: inline;
    }

    img {
      vertical-align: middle;
    }

    #navbar-left {
      width: 100%;
      height: 30px;
      background-color: lightgrey;
      line-height: 30px;

    }

    #navbar-left ul li span {
      font-size: 12px;
      color: #999;
      margin-left: 30px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    nav {
      position: absolute;
      left: 900px;
      top: -10px;
      padding: 0 16px;
    }

    .nav-list {
      display: flex;
      list-style: none;
      height: 48px;
      align-items: center;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      text-decoration: none;
      font-size: 12px;
      color: #999;
      cursor: pointer;
    }


    .dropdown-icon {
      width: 12px;
      height: 12px;
      margin-left: 4px;
      transform: rotate(0deg);
      transition: transform 0.2s;
    }

    .dropdown-icon.active {
      transform: rotate(180deg);
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: whitesmoke;
      width: 100px;
      display: none;
      opacity: 0;
      transition: opacity 0.2s;
      margin-left: 15px;
    }

    .dropdown-menu.show {
      display: block;
      opacity: 1;
    }

    .dropdown-item {
      display: block;
      text-decoration: none;
      color: #666;
      font-size: 12px;
      margin-top: 10px;
      text-indent: 30px;

    }

    .dropdown-item:hover {
      color: red;
    }

    #bog-box-top {
      align-items: center;
    }


    <%--loger地名部分--%>
    .city-selector {
      position: relative;
      display: inline-block;
    }

    .selected-city {
      margin-left: 20px;
      line-height: 40px;
      height: 40px;
      font-size: 16px;
      color: #666666;
    }

    .city-trigger {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      background: none;
    }

    .city-trigger:hover {
      color: #00b96b;
    }

    .arrow {
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid currentColor;
      transition: transform 0.2s;
    }

    .arrow.down {
      transform: rotate(180deg);
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 50px;
      left: 22px;
      width: 600px;
      background: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      padding: 16px;
      z-index: 1000;

    }

    .tabs {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
    }

    .tab {
      padding: 4px 8px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      background: none;
      color: #666;
    }

    .tab.active {
      color: #00b96b;
      border-bottom: 2px solid #00b96b;
    }

    .cities-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .city-button {
      padding: 8px;
      font-size: 14px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 4px;
    }

    .city-button:hover {
      color: red;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .contact-wrapper {
      position: absolute;
      left: 1300px;
      top: 65px;
      z-index: 1000;
    }


    .contact-icon i {
      color: white;
      font-size: 24px;
    }

    .contact-info {
      position: absolute;
      left: 0;
      top: 60px;
      width: 200px;
      background: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: none;
    }

    .contact-info h3 {
      margin: 0 0 10px 0;
      font-size: 16px;
      color: #333;
    }

    .qr-code {
      width: 150px;
      height: 150px;
      margin: 10px auto;
      display: block;
    }

    .phone-numbers {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eee;
    }

    .phone-number {
      margin: 5px 0;
      color: #666;
      font-size: 14px;
    }


    #span-kefu {
      font-size: 12px;
      display: inline-block;
      margin-left: 10px;
      color: #666666;
    }

    #span-ipone {
      color: #666666;
    }

    /*头部导航栏*/
    #GYH-nav {
      background-color: #00c250;
      width: 100%;
      padding: 0;
      margin: 0;
      margin-top: 20px;
    }

    .GYH-nav-container {


      display: flex;
      align-items: center;

    }

    .GYH-nav-list {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .GYH-nav-item {
      position: relative;
      margin-left: 6px;
    }

    .GYH-nav-link {
      color: white;
      text-decoration: none;
      padding: 15px 20px;
      display: block;
      font-size: 14px;
      position: relative;

    }

    .GYH-nav-link:after {
      content: "▾";
      margin-left: 5px;
      font-size: 12px;
      opacity: 0.8;
    }

    .GYH-nav-item:hover .GYH-nav-link {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .GYH-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: white;
      min-width: 150px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      display: none;
      z-index: 1000;
    }

    .GYH-dropdown-item {
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #eee;
    }

    .GYH-dropdown-item:hover {
      background-color: #f5f5f5;
    }

    /*底部*/
    .service-highlights {
      display: flex;
      justify-content: space-around;
      padding: 20px 0;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    .highlight-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #666;
    }

    .site-footer {
      background: #333;
      color: #fff;
      padding: 40px 0;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      padding: 0 20px;
    }

    .footer-section h3 {
      font-size: 16px;
      margin-bottom: 20px;
      color: #fff;
    }

    .footer-section ul {
      list-style: none;
      padding: 0;
    }

    .footer-section{
      margin-left: -50px;
    }

    .footer-section ul li {
      margin-bottom: 10px;
      display: block;
    }

    .footer-link {
      color: #999;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-link:hover {
      color: #fff;
    }

    .qr-code {
      text-align: center;
    }

    .qr-code img {
      width: 120px;
      height: 120px;
      margin-bottom: 10px;
    }

    .popular-links {
      max-width: 1200px;
      margin: 20px auto 0;
      padding: 20px;
      border-top: 1px solid #444;
    }

    .links-section {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      color: #999;
    }

    .links-section a {
      color: #999;
      text-decoration: none;
    }

    .links-section a:hover {
      color: #fff;
    }



    #footer-section{
      position: absolute;
      left: 1400px;

    }

    #footer-section h3{
      margin-left: 12px;
    }


    #foot-bottom a{
      text-decoration: none;
      color: grey;
    }

    #foot-bottom p{
      color: grey;
    }

    #login-text-index{
      text-decoration: none;
      color: #999999;
    }

    #zhuce a{
      text-decoration: none;
      color: #999999;
    }

    /*头部图片自由转换部分*/
    .carousel-container {
      position: relative;
      width: 100%;
      max-width: 100%;
      height: 500px;
      margin: 0 auto;
      overflow: hidden;
    }

    .carousel-slide {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .carousel-slide.active {
      opacity: 1;
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .carousel-dots {
      position: absolute;
     top:260px;
     left: 1400px;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid lightgrey;
      cursor: pointer;
      transition: background-color 0.3s ease;

    }

    .dot.active {
      background-color: white;
    }
    .carousel-slide img{
      width: 100%;
      height: 60%;
    }


/*头部名字*/
    #top-name span{
      float: right;
      font-size: 14px;
      display: block;
      color: #666;
      line-height: 46px;
      white-space: nowrap;
      position: relative;
      margin-right: 30px;
    }

   .carousel-container{
     margin-top: -150px;
    text-align: center;

   }

   .yanke_tit{

     color: #333;
     font-size: 30px;
     margin-bottom: 14px;
     font-weight: 400;
   }
   .yanke_desc{
     color: #999999;
   }

   /*同城旅客，行走的超人*/
    .gallery-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin: 0 40px;
    }

    .gallery-item {
      position: relative;
      aspect-ratio: 1;
      overflow: hidden;
      cursor: pointer;
    }

    .gallery-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .gallery-item:hover .gallery-image.primary {
      opacity: 0;
    }

    .gallery-image.secondary {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }

    .gallery-item:hover .gallery-image.secondary {
      opacity: 1;
    }

    .gallery-caption {
      text-align: center;
      padding: 10px;
      background: rgba(255, 255, 255, 0.9);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.8);
      border: none;
      padding: 15px;
      cursor: pointer;
      font-size: 20px;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .nav-button:hover {
      background: rgba(255, 255, 255, 1);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }



    .gallery-container{
      margin-top: -400px;
    }

    #swiper-outer{
    margin-left: 180px;
      margin-bottom: 30px;

    }

    #yanke_show_con{
      text-align: center;
      margin-bottom: 20px;
    }

    /*验客作品SHOW页面*/
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* Tab Navigation */
    .tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
      border-bottom: 1px solid #eee;
    }

    .tab-button {
      padding: 15px 30px;
      font-size: 16px;
      background: none;
      border: none;
      cursor: pointer;
      color: #666;
      position: relative;
    }

    .tab-button.active {
      color: #00b96b;
    }

    .tab-button.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #00b96b;
    }

    /* Grid Layout */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      padding: 20px 0;
    }

    .card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
    }

    .card-title {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .card-meta {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
    }

    .author-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .author-name {
      margin-right: 15px;
    }

    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30px;
      gap: 10px;
    }

    .page-button {
      padding: 8px 12px;
      border: 1px solid #ddd;
      background: white;
      cursor: pointer;
      border-radius: 4px;
    }

    .page-button.active {
      background: #00b96b;
      color: white;
      border-color: #00b96b;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .swiper-outer {
    position: relative;
      left: 480px;
    }

    #top-image{
      margin-left:280px;
    }

    .destination-partners {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
    }

    .more-link {
      color: #666;
      text-decoration: none;
      transition: color 0.3s;
    }

    .more-link:hover {
      color: #ff6b00;
    }

    .partners-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 2rem;

    }

    .partner-item {
      text-align: center;
      text-decoration: none;
    }

    .partner-image {
      aspect-ratio: 1;
      margin-bottom: 0.5rem;
    }

    .partner-image img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      transition: transform 0.3s;
    }

    .partner-name {
      color: #333;
      font-size: 0.875rem;
      transition: color 0.3s;
      display: inline-block;
      margin-top: -130px;

    }

    .partner-item:hover .partner-image img {
      transform: scale(1.05);
    }

    .partner-item:hover .partner-name {
      color: #ff6b00;
    }

    #moreAndMore{
      margin-left: 750px;



    }
    #moreAndMore a{
      text-decoration: none;
      color: #999;
    }

  </style>
</head>





<body>
<div id="bog-box-top">
  <div id="navbar-left">
    <ul>
      <li><span><a id="login-text-index" href="/login.jsp">您好，请登录</a><span id="tuichu">退出</span></span></li>
      <li><span id="zhuce"><a href="/register.jsp">注册</a></span></li>
      <li><img src="static/img/pc_index_gister.gif"></li>
    </ul>


  </div>


  <nav>
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link">
          Language
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item"><img
                  src="static/img/rBLkCVvWbqmAJWxmAAABQaM8azg489.png">English</a>
          <a href="#" class="dropdown-item"><img src="static/img/rBLkCVvS7pSAa_ssAAAA82XoyWY361.png">中文</a>
        </div>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">我的订单</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          我的同程
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">我的订单</a>
          <a href="#" class="dropdown-item">我的信息</a>
          <a href="#" class="dropdown-item">我的收藏</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          客服服务
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">帮助中心</a>
          <a href="#" class="dropdown-item">在线客服</a>
          <a href="#" class="dropdown-item">人工申诉</a>
          <a href="#" class="dropdown-item">抱团定制</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          合作中心
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">网站加盟</a>
          <a href="#" class="dropdown-item">合作加盟</a>
          <a href="#" class="dropdown-item">门票合作</a>
          <a href="#" class="dropdown-item">商旅合作</a>
        </div>
      </li>


    </ul>
  </nav>

</div>

<div>
  <img src="static/img/PS2lfS0492.jpg">
</div>


<%--首页导航栏--%>
<div id="GYH-nav">

  <div class="GYH-nav-container">
    <ul class="GYH-nav-list">
      <li class="GYH-nav-item">
        <a href="/index.jsp" class="GYH-nav-link">首页</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/jd-index.jsp" class="GYH-nav-link">酒店</a>
        <div class="GYH-dropdown">
          <a href="/hotel/domestic" class="GYH-dropdown-item">国内酒店</a>
          <a href="/hotel/international" class="GYH-dropdown-item">国际酒店</a>
        </div>
      </li>
      <li class="GYH-nav-item">
        <a href="/search_tickets.jsp" class="GYH-nav-link">机票</a>
        <div class="GYH-dropdown">
          <a href="/flight/domestic" class="GYH-dropdown-item">国内机票</a>
          <a href="/flight/international" class="GYH-dropdown-item">国际机票</a>
        </div>
      </li>
      <li class="GYH-nav-item">
        <a href="/train.jsp" class="GYH-nav-link">火车票</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/car" class="GYH-nav-link">汽车船票</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/vacation" class="GYH-nav-link">景点</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/local" class="GYH-nav-link">周边团购</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/domestic" class="GYH-nav-link">境内游</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/international" class="GYH-nav-link">出境游</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/post" class="GYH-nav-link">邮轮</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/visa" class="GYH-nav-link">签证</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/strategy.jsp" class="GYH-nav-link">攻略</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">企业商旅</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">亮丽内蒙古</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">更多</a>
      </li>
    </ul>
  </div>
</div>



<%--中间部分--%>
<div>

  <div id="top-name">
    <span>验客</span>
    <span>个人主页</span>
  </div>

  <div class="carousel-container">
    <div class="carousel-slide active">
      <img src="static/img/1zc0Gn11dh6.png" alt="Scenic river view">
    </div>
    <div class="carousel-slide">
      <img src="static/img/1zm0Ihqddfi.png" alt="Temple views">
    </div>
    <div class="carousel-slide">
      <img src="static/img/1zc0Gn11dh6.png" alt="Tea fields">
    </div>
    <div class="carousel-dots">
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

  <div class="carousel-container">
    <h2 class="yanke_tit">同程验客</h2>
    <p class="yanke_desc first_desc">每位验客都是一个行走的旅行超人</p>
    <p id="moreAndMore"> <a href="strategyMore.jsp">更多...</a></p>
  </div>
<%--同城旅客部分--%>
  <div class="gallery-container">
    <button class="nav-button prev" onclick="changePage(-1)">←</button>
    <button class="nav-button next" onclick="changePage(1)">→</button>

    <div class="gallery-grid" id="galleryGrid"></div>
  </div>

<div id="swiper-outer">
  <img src="static/img/1zc0LzOlEze.png">
</div>


  <div id="yanke_show_con">
  <h2 class="yanke_tit">验客作品SHOW</h2>
  <p class="yanke_desc">多彩回忆，记录美好，在这里，等你来</p>
  </div>

  <div class="container">
    <div class="tabs">
      <button class="tab-button active" data-tab="recommended">作品推荐</button>
      <button class="tab-button" data-tab="journals">精彩游记</button>
      <button class="tab-button" data-tab="column">旅行专栏</button>
    </div>

    <div id="recommended" class="tab-content active">
      <div class="grid">
        <!-- Content will be dynamically inserted here -->
      </div>
    </div>

    <div id="journals" class="tab-content">
      <div class="grid">
        <!-- Content will be dynamically inserted here -->
      </div>
    </div>

    <div id="column" class="tab-content">
      <div class="grid">
        <!-- Content will be dynamically inserted here -->
      </div>
    </div>

    <div class="pagination">
      <button class="page-button">&lt;</button>
      <button class="page-button active">1</button>
      <button class="page-button">2</button>
      <button class="page-button">3</button>
      <button class="page-button">4</button>
      <button class="page-button">5</button>
      <button class="page-button">6</button>
      <span>...</span>
      <button class="page-button">&gt;</button>
      <span>跳转到</span>
      <input type="text" style="width: 50px; padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
      <button class="page-button">GO</button>
    </div>
  </div>


  <div id="swiper-outer">
    <img src="static/img/1zm0NUUXQu4.png">
  </div>

  <div class="swiper-outer" id="swiper-outer">
    <h2 class="yanke_tit">精彩活动</h2>
    <p class="yanke_desc">免费报名，惊喜不停，上榜分分钟</p>
  </div>
  <div id="top-image">
    <img src="static/img/1zm0KWK8uaY.png">
    <img src="static/img/1zc0J3qdMpq.png">
    <img src="static/img/1ydRLIcIhj2.png">
  </div>


  <div class="destination-partners">
    <div class="header">
      <h2>活动合作方</h2>
      <a href="/more-destinations" class="more-link">更多目的地 ></a>
    </div>

    <div class="partners-grid">
      <a href="/partners/shenzhen" class="partner-item">
        <div class="partner-image">
          <img src="/static/img/1lqJIDblskg.png.webp" >
        </div>
        <span class="partner-name">克拉玛依旗舰馆</span>
      </a>
      <!-- Add more partner items as needed -->
      <a href="/partners/shenzhen" class="partner-item">
        <div class="partner-image">
          <img src="/static/img/15qfBW6Mpdm.png.webp" >
        </div>
        <span class="partner-name">克拉玛依旗舰馆</span>
      </a>


      <a href="/partners/shenzhen" class="partner-item">
        <div class="partner-image">
          <img src="/static/img/17uagnMlg9q.png.webp" >
        </div>
        <span class="partner-name">克拉玛依旗舰馆</span>
      </a>

      <a href="/partners/shenzhen" class="partner-item">
        <div class="partner-image">
          <img src="/static/img/17uatTBoNdC.jpg.webp" >
        </div>
        <span class="partner-name">克拉玛依旗舰馆</span>
      </a>


      <a href="/partners/shenzhen" class="partner-item">
        <div class="partner-image">
          <img src="/static/img/17uaqpKAR0c.png.webp" >
        </div>
        <span class="partner-name">克拉玛依旗舰馆</span>
      </a>

    </div>
  </div>


</div>



<%--底部--%>
<div class="service-highlights">
  <div class="highlight-item">
    <i class="icon-price"></i>
    <span>价格公正，安心购买</span>
  </div>
  <div class="highlight-item">
    <i class="icon-quality"></i>
    <span>品质保证，放心出行</span>
  </div>
  <div class="highlight-item">
    <i class="icon-service"></i>
    <span>产品丰富，一站式服务</span>
  </div>
  <div class="highlight-item">
    <i class="icon-support"></i>
    <span>专业顾问，24小时客服</span>
  </div>
</div>
<!-- Footer Navigation -->
<footer class="site-footer">
  <div class="footer-content">
    <!-- Customer Service Section -->
    <div class="footer-section">
      <h3>消费者服务</h3>
      <p>同程投诉受理电话：95711</p>
      <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
    </div>

    <!-- About Section -->
    <div class="footer-section">
      <h3>关于同程</h3>
      <ul>
        <li><a href="/about" class="footer-link">同程简介</a></li>
        <li><a href="/sites" class="footer-link">可信网站</a></li>
        <li><a href="/sitemap" class="footer-link">网站地图</a></li>
        <li><a href="/terms" class="footer-link">用户协议与隐私条款</a></li>
      </ul>
    </div>

    <!-- Partnership Section -->
    <div class="footer-section">
      <h3>加盟合作</h3>
      <ul>
        <li><a href="/join" class="footer-link">合作加盟</a></li>
        <li><a href="/business" class="footer-link">商旅合作</a></li>
        <li><a href="/insurance" class="footer-link">旅游保险</a></li>
        <li><a href="/store" class="footer-link">门店合作</a></li>
      </ul>
    </div>


    <div class="footer-section">
      <h3>联系我们</h3>
      <ul>
        <li><a href="/join" class="footer-link">联系我们</a></li>
        <li><a href="/business" class="footer-link">投诉建议</a></li>
        <li><a href="/insurance" class="footer-link">诚聘英才</a></li>
        <li><a href="/store" class="footer-link">廉洁举报平台</a></li>
      </ul>
    </div>

    <!-- Mobile App Section -->
    <div class="footer-section" id="footer-section">
      <h3>同程旅行app</h3>
      <div class="qr-code">
        <img src="static/img/erweima.png" alt="扫描下载APP">
        <p>手机预订更优惠</p>
      </div>
    </div>
  </div>

  <!-- Popular Links -->
  <div class="popular-links">
    <div class="links-section">
      <span>热点推荐：</span>
      <a href="/disneyland" class="footer-link">迪斯尼旅游</a>
      <a href="/thailand" class="footer-link">泰国旅游</a>
      <a href="/japan" class="footer-link">日本旅游</a>
      <!-- Add more links as needed -->
    </div>
  </div>

  <div id="foot-bottom">
    <p>Copyright © 2002-2024  版权所有  <a href="#">同程网络科技股份有限公司</a></p>
    <p><a href="#">经营许可证编号：合字B2-20180016 </a>    <a href="#">备案序号：苏ICP备09033604号</a>  <a href="#"><img src="static/img/微信图片编辑_20241216151627.jpg"></img>苏公网安备32059002001003号 </a>   <a href="#">旅行社业务许可证：L-JS-CJ00070</a>  </p>
    <p><a href="#">旅游网站诚信建设承诺书 </a>    <a href="#">旅游网站守法诚信责任状 </a>   <span>违规失信举报热线：4007-777-777转9</span></p>
    <p>国家文旅部全国旅游投诉热线：拨打12345，或登录全国旅游网络投诉举报平台</p>
    <p>网站网违法和不良信息举报 邮箱：jcj@ly.com</p>
    <p><img src="static/img/szicbok.gif"></p>

  </div>
</footer>



<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript"></script>


<script>
  $(document).ready(function() {
    // Add smooth page transition on link clicks
    $('.footer-link').click(function(e) {
      e.preventDefault();
      var href = $(this).attr('href');

      // Store the clicked link URL in session storage
      sessionStorage.setItem('lastClickedLink', href);

      // Fade out the page
      $('body').fadeOut(300, function() {
        // Navigate to the new page
        window.location.href = href;
      });
    });

    // Check if we're coming from a footer link click
    if (sessionStorage.getItem('lastClickedLink')) {
      // Fade in the page
      $('body').hide().fadeIn(300);
      // Clear the stored link
      sessionStorage.removeItem('lastClickedLink');
    }

    // Add hover animation for service highlights
    $('.highlight-item').hover(
            function() {
              $(this).stop().animate({ transform: 'translateY(-5px)' }, 200);
            },
            function() {
              $(this).stop().animate({ transform: 'translateY(0)' }, 200);
            }
    );
  });
</script>


<%--登录文字替换--%>
<script>
  if ("${user}"==""){
    document.getElementById("login-text-index").innerText = "您好，请登录"
    //将退出按钮隐藏
    document.getElementById("tuichu").style.display = "none"

  }else{
    document.getElementById("login-text-index").innerText = "Hi,同程会员${user.username}"
    //将退出按钮显示
    document.getElementById("tuichu").style.display = "inline-block"
    //让登录按钮失去效果,页面不在跳转
    document.getElementById("login-text-index").href = "#"
    //隐藏注册按钮
    document.getElementById("zhuce").style.display = "none"
  }


  //点击退出按钮
  $("#tuichu").click(function () {
    //将session域中的值清空
    $.ajax({
      url:"/logout",
      type:"post",
      dataType:"text",
      async:false,
      success:function (data) {
        if (data==200){
          //将session域中的值清空
          window.location.href="/index.jsp"
        }else{
          alert("退出失败")
        }
      }
    })




  })



</script>

<%--图片根据光圈自动转换部分--%>
<script>
  $(document).ready(function() {
    let currentSlide = 0;
    const slides = $('.carousel-slide');
    const dots = $('.dot');
    const totalSlides = slides.length;

    function showSlide(index) {
      slides.removeClass('active');
      dots.removeClass('active');
      $(slides[index]).addClass('active');
      $(dots[index]).addClass('active');
    }

    function nextSlide() {
      currentSlide = (currentSlide + 1) % totalSlides;
      showSlide(currentSlide);
    }

    // Auto advance slides every 5 seconds
    let slideInterval = setInterval(nextSlide, 5000);

    // Click handlers for dots
    dots.click(function() {
      clearInterval(slideInterval);
      currentSlide = $(this).index();
      showSlide(currentSlide);
      slideInterval = setInterval(nextSlide, 5000);
    });
  });
</script>

<%--同城旅客部分--%>
<script>
    const galleryData = [
    // Page 1
    [
    { primary: 'static/img/3qMxZZ.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '雨朋Hades' },
    { primary: 'static/img/6Aksh5.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '生生color' },
    { primary: 'static/img/8VI6J7.png', secondary: 'static/img/微信截图_20241220095616.png', caption: '上海冷空气' },
    { primary: 'static/img/aCBBcC.png', secondary: 'static/img/微信截图_20241220095616.png', caption: '陈安琪' },
    { primary: 'static/img/AF6mKX.png', secondary: 'static/img/微信截图_20241220095616.png', caption: '吴秋煌' },
    { primary: 'static/img/aqdBhT.jpg', secondary: 'static/img/微信截图_20241220095633.png', caption: 'Domi李' }
    ],
    // Add more pages as needed
    [
    { primary: 'static/img/CEcCxq.jpg', secondary: 'static/img/微信截图_20241220095640.png', caption: '雨朋Hades' },
    { primary: 'static/img/DV5kzp.jpg', secondary: 'static/img/微信截图_20241220095655.png', caption: '生生color' },
    { primary: 'static/img/eggB5a.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '上海冷空气' },
    { primary: 'static/img/PMcEjz.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '陈安琪' },
    { primary: 'static/img/rBANDFlKC2aAKDv0AAEAANaCtFc765%20(1).jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '吴秋煌' },
    { primary: 'static/img/rBANDFlKCAyANeYEAAEAAKa4wZI409.jpg', secondary: 'static/img/微信截图_20241220095616.png',caption: 'Domi李' }
    ],
    [
    { primary: 'static/img/Tvq18n.png', secondary: 'static/img/微信截图_20241220095616.png', caption: '雨朋Hades' },
    { primary: 'static/img/u9F0dm.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '生生color' },
    { primary: 'static/img/WrqPOK.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '上海冷空气' },
    { primary: 'static/img/Z7182i.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '陈安琪' },
    { primary: 'static/img/Zt1gLM.jpg', secondary: 'static/img/微信截图_20241220095616.png', caption: '吴秋煌' },
    { primary: 'static/img/cPgMlQ.jpg',secondary: 'static/img/微信截图_20241220095616.png', caption: 'Domi李' }
    ],
    ];

    let currentPage = 0;

    function renderGallery() {
      const grid = document.getElementById('galleryGrid');
      grid.innerHTML = '';

      galleryData[currentPage].forEach(item => {
      const galleryItem = document.createElement('div');
      galleryItem.className = 'gallery-item';

      const primaryImage = document.createElement('img');
      primaryImage.src = item.primary;
      primaryImage.alt = item.caption;
      primaryImage.className = 'gallery-image primary';

      const secondaryImage = document.createElement('img');
      secondaryImage.src = item.secondary;
      secondaryImage.alt = item.caption;
      secondaryImage.className = 'gallery-image secondary';

      const caption = document.createElement('div');
      caption.className = 'gallery-caption';
      caption.textContent = item.caption;

      galleryItem.appendChild(primaryImage);
      galleryItem.appendChild(secondaryImage);
      galleryItem.appendChild(caption);

      grid.appendChild(galleryItem);
    });



    }

    function changePage(delta) {
      const totalSlides = galleryData.length;
      const newPage = (currentPage + delta + totalSlides) % totalSlides;

      if (newPage >= 0 && newPage < galleryData.length) {
      currentPage = newPage;
      renderGallery();
    }
    }

    // Initial render
    renderGallery();
</script>

<script>
  // Tab switching functionality
  document.addEventListener('DOMContentLoaded', function() {
    const tabs = document.querySelectorAll('.tab-button');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        // Remove active class from all tabs and contents
        tabs.forEach(t => t.classList.remove('active'));
        contents.forEach(c => c.classList.remove('active'));

        // Add active class to clicked tab and corresponding content
        tab.classList.add('active');
        const contentId = tab.getAttribute('data-tab');
        document.getElementById(contentId).classList.add('active');
      });
    });

    // Sample data structure
    const sampleData = {
      recommended: [
        {
          image: 'static/img/rBLkBVjcnjeAGn1XAACAAEU-whc068_640x320_00.jpg',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        // Add more items as needed
        {
          image: 'static/img/u9F0dm.jpg',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: 'static/img/wVc9ge_640x320_00%20(1).jpg',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: 'static/img/8VI6J7.png',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: 'static/img/rBLkBllQyaiAWuOmAAEyvJglRD0007.jpg',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: 'static/img/eggB5a.jpg',
          title: '马来西亚验客：新航线直飞还免签，...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
      ],
      journals: [
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        // Add more items as needed
      ],
      // Add more categories as needed
      column: [
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        {
          image: '/static/img/eggB5a.jpg',
          title: '马累：马累的...',
          author: '摄影啊么么哒',
          date: '2024.12.03'
        },
        // Add more items as needed
      ]
    };

    // Function to create card element
      function createCard(data) {
          console.log("!!!!!!!!!!!!!!!!!!!!!!")
          return  " <div class='card'> " +
              "<img src="+data.image+" alt='+"+data.title+"+' class='card-image'> " +
              "<div class='card-content'> " +
              "<h3 class='card-title'>"+data.title+"</h3> " +
              "<div class='card-meta'>" +
              " <span class='author-name'>"+data.author+"</span> " +
              "<span class='publish-date'>"+data.date+"</span>" +
              " </div>" +
              " </div>" +
              " </div>"

      }


      // Initialize content
    function initializeContent() {
      Object.keys(sampleData).forEach(category => {
        const container = document.querySelector("#"+ category +" .grid");

        if (container) {
          container.innerHTML = sampleData[category]
                  .map(item => createCard(item))
                  .join('');
        }
      });
    }

    initializeContent();

  });
</script>
</body>
</html>
